<template>
  <view>
    <view class="imgCard">
      <KKtooltip ref="kktooltipRef">
        <template #content>
          <ChatTips :showMultiSelect="false" @chatTipsClick="chatTipsClick" />
        </template>
        <kk-image
          class="imgCard-img"
          mode="widthFix"
          :style="{ maxWidth: maxWidth }"
          :maxWidth="maxWidth"
          borderRadius="12rpx"
          :url="imgUrl"
        ></kk-image>
      </KKtooltip>
    </view>
    <ConversationStatus
      class="conversationStatus"
      v-if="
        data.from === KKConversationFrom.me &&
        (data.status === KKConversationStatus.fail ||
          data.status === KKConversationStatus.retry)
      "
      :data="data"
      @sendFail="sendFail"
      @reSendMsg="reSendMsg"
    />
  </view>
</template>
<script setup lang="ts">
import { KKConversationFrom, KKConversationStatus } from "./conversitonEnum";
import { getFileUrl } from "@/utils/util";
import ConversationStatus from "@/pagesA/answer/components/conversationStatus.vue";
import KKtooltip from "@/pagesA/components/kk-tooltip.vue";
import ChatTips from "@/pagesA/answer/chat/chatTips.vue";

import { computed, ref, watch } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  maxWidth: {
    type: String,
    default: "",
  },
  tapBgNumber: {
    type: Number,
    default: 0,
  },
});

const imgUrl = computed(() => {
  if (props.data.tempFilePath) {
    return props.data.tempFilePath;
  }
  return getFileUrl(props.data.text) || "";
});

const sendFail = () => {
  emit("sendFail", props.data);
};

// 重新发送消息
const reSendMsg = () => {
  emit("reSendMsg", props.data);
};

const kktooltipRef = ref();

// 聊天提示事件点击
const chatTipsClick = (type: string) => {
  kktooltipRef.value?.close();
  emit("chatTipsClick", { type, data: props.data });
};

watch(
  () => props.tapBgNumber,
  (newValue, oldValue) => {
    kktooltipRef.value?.close();
  }
);

const emit = defineEmits(["reSendMsg", "sendFail", "chatTipsClick"]);
</script>

<style lang="scss" scoped>
.imgCard {
  border-radius: 12rpx;
  &-img {
    margin-left: auto;
    margin-right: 0px;
    border-radius: 12rpx;
  }
  .conversationStatus {
    margin-top: 24rpx;
  }
}
</style>
